<template>
  <div class="box">
    <header>
      <van-nav-bar title="订单确认" left-arrow @click-left="$router.go(-1)" />
    </header>
    <main>
      <div class="submit-address" @click="newAddress">
        <span>新增收货地址</span>
      </div>
      <!-- 底部弹出 -->
      <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">
        <van-address-edit
          :area-list="areaList"
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
        />
      </van-popup>
      <div v-for="(item, index) in selectedItems" :key="index" class="order-list">
        <div>
          <dl class="order-item">
            <dt><img :src="item.img" alt="" style="width: 150px; height: 150px" /></dt>
            <dd>
              {{ item.title }}
              <p>x{{ item.num }}</p>
            </dd>
            <b>￥{{ item.price }}</b>
          </dl>
        </div>
        <span>
          <dl class="order-items">
            <dt>商品金额</dt>
            <dd>￥{{ item.price }}</dd>
          </dl>
          <dl class="order-items">
            <dt>优惠卷</dt>
            <dd>无可用></dd>
          </dl>
          <dl class="order-items">
            <dt>运费</dt>
            <dd>￥0.00</dd>
          </dl>
          <dl class="order-items">
            <dt></dt>
            <dd class="order-items-price">￥{{ item.price }}</dd>
          </dl>
        </span>
      </div>
      <div class="fp">
        <van-cell center title="发票信息">
          <template #right-icon>
            <van-switch v-model="checked" @click="check" />
          </template>
        </van-cell>
        <van-field v-model="value" label="买家留言：" placeholder="对本次交易的说明" />
      </div>
    </main>
    <footer>
      <div class="jiage">
        <div class="pric">
          <span>应付金额：</span>
          <span class="numb"
            >￥{{
              selectedItems
                .reduce((sum, item) => sum + item.price * item.num, 0)
                .toFixed(2)
            }}</span
          >
        </div>
        <div class="buttonss">
          <button @click="pay">立即支付</button>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { showToast } from "vant";
// 获取地址
import { areaList } from "@vant/area-data";

import { computed, onMounted, ref } from "vue";
const showBottom = ref(false);
const newAddress = () => {
  showBottom.value = true;
};

const cartlist = ref([]);
// 页面加载时从 localStorage 获取购物车数据
onMounted(() => {
  const storedCart = localStorage.getItem("cartlist");
  if (storedCart) {
    cartlist.value = JSON.parse(storedCart);
  }
});
import { useRoute } from "vue-router";
import axios from "../../utils/index";
const route = useRoute();
const selectedItems = JSON.parse(route.query.selectedItems as string) || [];
const checked = ref(true);
const check = () => {
  checked.value = !checked.value;
};

// 地址编辑

const searchResult = ref([]);

const onSave = () => showToast("save");
const onDelete = () => showToast("delete");
const onChangeDetail = (val) => {
  if (val) {
    searchResult.value = [
      {
        name: "黄龙万科中心",
        address: "杭州市西湖区",
      },
    ];
  } else {
    searchResult.value = [];
  }
};
  let pricenum = 0
onMounted(() => {

  selectedItems.forEach((item)=>{
    pricenum += item.price * item.num
  })
  return pricenum
});

const pay = ()=>{
  // 模拟id
const orderId = Date.now().toString();
axios
  .get("/api/pay", {
    params: {
      id: orderId,
      price: pricenum,
    },
  })
  .then((res) => {
    if (res.data.code == 200) {
      window.open(res.data.result);
    }
  });
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;

  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
.submit-address {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  display: flex;
  background-color: #fff;
  line-height: 90px;
  font-size: 28px;
  margin-top: 20px;
}
.submit-address span {
  margin-left: 20px;
}
.submit-address span:nth-child(2) {
  line-height: 80px;
}
.submit-address span:nth-child(3) {
  margin-left: 300px;
}
.submit-address img {
  width: 30px;
  height: 30px;
  margin-left: 30px;
}
.bottom {
  width: 100%;
  height: 100%;
}
.bottom-header {
  width: 100%;
  height: 80px;
  display: flex;
  line-height: 80px;
  font-size: 28px;
  border-bottom: 1px solid #ccc;
}
.bottom-header span {
  margin-left: 200px;
}
.bottom-header span:nth-child(2) {
  margin-left: 200px;
}
.bottom-header img {
  width: 40px;
  height: 40px;
  margin-left: 60px;
}
.bottom-content {
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
.bottom-content-item {
  width: 100%;
  height: 80px;
  display: flex;
  line-height: 80px;
  font-size: 28px;
}
.bottom-content-item span {
  width: 150px;
  height: 80px;
  margin-left: 10px;
}
.order-list {
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
}
.order-item {
  width: 100%;
  height: 100%;
  display: flex;
  line-height: 80px;
  font-size: 28px;
  position: relative;
}
.order-item b {
  width: 30px;
  height: 20px;
  position: absolute;
  top: 70px;
  right: 100px;
}
.order-items {
  font-size: 25px;
  display: flex;
  margin-left: 30px;
}
.order-items dt {
  width: 100px;
  margin-bottom: 10px;
}
.order-items dd {
  width: 100px;
  margin-left: 460px;
}
.order-items-price {
  font-size: 30px;
  color: red;
  font-weight: bolder;
}
.order-item img {
  width: 100px;
  height: 100px;
  margin-left: 20px;
}
.order-item span {
  margin-left: 20px;
}
.order-zhifu {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

header {
  width: 100%;
  height: 80px;
}
main {
  flex: 1;
  overflow: scroll;
  padding: 0 20px;
}
footer {
  width: 100%;
  height: 80px;

  background: white;
}
.jiage {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
}
.pric {
  margin-left: 20px;
}
.buttonss {
  margin-right: 20px;
}
.buttonss button {
  padding: 10px 30px;

  border: none;
  background: #fc5d35;
  color: #ffff;
  border-radius: 30px;
}
.numb {
  color: red;
  font-weight: 600;
}
.fp {
  margin-top: 20px;
}
</style>
